import { Component, HostListener, OnDestroy, OnInit } from "@angular/core";
import { FormBuilder, FormGroup } from '@angular/forms'
import { sjgzxinModuledatas } from "../pubcomponent/pageTitle.datas";
import { CommService } from "../comm-service";
import { MyhttpService } from "../myhttp.service";
import { LocalStorageService } from "../local-storage-service";

declare var $: any;

@Component({
  template: `
  <div class="all_bg paddingTop">
    <div class="">
      <div class="portlet-body">
        <div class="row">
          <form class="form-horizontal" role="form">
            <div class="col-lg-4 col-lg-offset-7">
              <div class="form-group">
                <label class="control-label col-lg-3">出入库类型:</label>
                <div class="col-lg-8">
                  <select class="form-control" id="crklxSelect" name="crklx" [(ngModel)]="s_obj.crklx"
                          (change)="inittable_sjcrk()"></select>
                </div>
              </div>
            </div>
            <div class="col-lg-1">
              <button type="button" class="btn blue" (click)="inittable_sjcrk()">
                <i class="fa fa-search"></i> 搜索
              </button>
            </div>
          </form>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <my-table [o]="table_sjcrk"></my-table>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fad" id="xq_Modal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
      <div class="modal-dialog smmodalwidth" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">出入库试卷信息</h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-lg-12" *ngIf="xqobj_sjcrk">
                <xq-form [o]="xqobj_sjcrk"></xq-form>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  `
})
export class SjcrkComponent implements OnInit, OnDestroy {
  s_obj: any = {
    crklx: "",
    ksjhbh: ""
  };
  table_sjcrk: any;
  crklxList: any = [{
    code: "1",
    name: "出库"
  }, {
    code: "2",
    name: "入库"
  }];
  crklxKeyValue: any = {
    "1": "出库",
    "2": "入库"
  };
  xqobj_sjcrk: any;

  /**
   * 出入库的表格
   */
  inittable_sjcrk(): void {
    const that = this;
    this.table_sjcrk = {
      tableid: "table_sjcrk",
      url: "sjgz/rwjh/cxsjcrklb",
      reqobj: this.s_obj,
      sidePagination: "server",
      pageSize: 10,
      pageList: [10, 20, 30],
      total: "totalRows",
      rows: "sjcrkList",
      columns: [{
        title: "序号",
        field: "ordernum",
        cellStyle: function () {
          return {
            classes: 'td1'
          }
        }
      }, {
        title: "运送任务名称",
        field: "ysrwmc",
        cellStyle: function () {
          return {
            classes: 'td2'
          }
        }
      }, {
        title: "出入库类型",
        field: "crklx",
        cellStyle: function () {
          return {
            classes: 'td3'
          }
        },
        formatter: function (v) {
          return that.crklxKeyValue[v] ? that.crklxKeyValue[v] : "";
        }
      }, {
        title: "出入库时间",
        field: "crksj",
        cellStyle: function () {
          return {
            classes: 'td4'
          }
        }
      }, {
        title: "关联场所",
        field: "glcsmc",
        cellStyle: function () {
          return {
            classes: 'td1'
          }
        }
      }, {
        title: "出入库试卷科目",
        field: "crksjxxList",
        events: this.myevents,
        formatter: function (v) {
          let kmlist: any[] = [];
          if (v && v.length) {
            kmlist = v.map((item) => {
              return item.kmmc
            });
          }
          let retstr: string = "";
          if (kmlist.length) {
            let kmstr: string = kmlist.join(";");
            kmstr = that.commservice.showTenchart(kmstr, 10);
            retstr += "<span>" + kmstr + "</span>";
          }
          retstr += "&nbsp;&nbsp;<button type='button' class='btn btn-xs btn-info xq_cryksjbxx'><i class='fa fa-search'></i> 出入库试卷信息</button>";
          return retstr;
        }
      }]
    };
      // this.table_sjcrk.pageSize = 50;
      // this.table_sjcrk.pageList = [50];
      // this.table_sjcrk.hiddenPageinfoLink = true;
      // this.table_sjcrk.paginationLoop = true;
      // this.table_sjcrk.paginationPreText = "<i class='fa fa-arrow-left'></i>上一页";
      // this.table_sjcrk.paginationNextText = "下一页<i class='fa fa-arrow-right'></i>";
      // this.table_sjcrk.height = this.commservice.getViewPort().height - this.commservice.topH - this.commservice.topmenuH - 240 - 50;
      this.table_sjcrk.height = this.commservice.getViewPort().height - this.commservice.topH - this.commservice.topmenuH - 240 - 50;
  }

  @HostListener("window:myevents", ["$event"])
  myevents = {
    "click .xq_cryksjbxx": function (e, value, row, index) {
      // 出入库试卷信息
      this.xqobj_sjcrk = {
        from: "sjcrkx",
        keyValue: {
          crksjxxList: value ? value : []
        }
      };
      $("#xq_Modal").modal({
        keyboard: true,
        backdrop: "static"
      });
    }.bind(this)
  }


  createsearchForm(): void {
    $("#crklxSelect").empty();
    let str: string = "";
    this.crklxList.forEach((item) => {
      str += "<option value='" + item.code + "'>" + item.name + "</option>";
    });
    $("#crklxSelect").append(str);
    $("#crklxSelect").selectpicker({
      size: 5
    });
    this.s_obj.crklx = this.crklxList[0].code;
  }

  constructor(private commservice: CommService,
    private itservice: MyhttpService,
    private fb: FormBuilder,
    private localStorageService: LocalStorageService) {

  }

  ngOnInit() {
    this.s_obj.ksjhbh = this.localStorageService.get("hksjh");
    this.createsearchForm();
    this.inittable_sjcrk();
  }

  ngOnDestroy() {

  }

}
